<template>
  <el-container style="height: 100vh; border: 1px solid #eee; overflow: hidden">
    <el-main>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>

      <el-table :data="ordersData.goods" border style="width: 100%">
        <el-table-column type="index" label="#" width="100"> </el-table-column>

        <el-table-column prop="order_number" label="订单编号" width="250">
        </el-table-column>

        <el-table-column prop="order_price" label="订单价格" width="200">
        </el-table-column>
        <el-table-column
          prop="pay_status"
          label="是否付款"
          :formatter="statusFormatter"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="200">
        </el-table-column>
        <el-table-column
          prop="update_time"
          label="发货时间"
          :formatter="dateFormat"
          width="250"
        >
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <div>
            <el-button type="primary" icon="el-icon-edit" circle @click="showEditFn(scope.row)"></el-button>
            </div>
          </template >
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:currentPage="params.pagenum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ordersData.total"
      >
      </el-pagination>
      <!-- 编辑 -->
      <el-dialog title="编辑订单" v-model="exidDialogFrom">
        <el-form :model="ordersData" ref="exidFrom">
          <el-form-item
            label="是否发货"
            :label-width="formLabelWidth"
            prop="is_send"
            :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
          >
            <el-select v-model="ordersData.is_send">
              <el-option label="已发货" value="1"></el-option>
              <el-option label="未发货" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="订单支付"
            :label-width="formLabelWidth"
            prop="order_pay"
            :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
          >
            <el-select
              v-model="ordersData.order_pay"
              placeholder="请选择"
            >
              <el-option label="未支付" value="0"></el-option>
              <el-option label="微信" value="2"></el-option>
              <el-option label="支付宝" value="1"></el-option>
              <el-option label="银行卡" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="订单价格"
            :label-width="formLabelWidth"
            prop="order_price"
            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
          >
            <el-input
              v-model="ordersData.order_price"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="订单数量"
            :label-width="formLabelWidth"
            prop="order_number"
            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
          >
            <el-input
              v-model="ordersData.order_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="支付状态"
            :label-width="formLabelWidth"
            prop="pay_status"
            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
          >
            <el-select
              v-model="ordersData.pay_status"
              placeholder="请选择"
            >
              <el-option label="未支付" value="0"></el-option>
              <el-option label="已支付" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer class="dialog-footer">
          <el-button  @click="exidDialogFrom = false">取 消</el-button>
          <el-button type="primary" @click="deleOrdersFn()">确 定</el-button>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import { useRouter } from "vue-router";
import { reactive, getCurrentInstance, onMounted, ref, computed } from "vue";
import moment from "moment";
import { getOrders,editOrders,seeOrders} from "../../http/api.js";
export default {
  setup() {
    const router = useRouter();
    let ordersData = reactive({
      order_id:'',
      order_number: "",
      order_pay: "",
      pay_status: "",
      order_price: "",
      is_send: "",
    });
    let formLabelWidth = "100px"
    let exidDialogFrom = ref(false);
    let params = reactive({
      pagenum: router.pagenum || 1,
      pagesize: router.pagesize || 30,
      query: router.query || "",
    });
    


    //获取订单
    const getordersFn = async () => {
      const res = await getOrders(params);
      console.log("233", res);
      Object.assign(ordersData, res);
      console.log("111", ordersData);
    };

    //时间
    const dateFormat = (row, column) => {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    };

    //判断是否付款
    const statusFormatter = (res, column) => {
      const order_pay = res.pay_status;
      if (order_pay == 0) {
        return "未付款";
      } else if (order_pay == 1) {
        return "已付款";
      }
    };

    const handleSizeChange = (num) => {
      params.pagesize = num;
      router.push({
        query: Object.assign({}, router.query, {
          query: params.query,
        }),
      });
      getordersFn();
    };
    //页码发生变化是触发
    const handleCurrentChange = (num) => {
      params.pagenum = num;
      router.push({
        query: Object.assign({}, router.query, {
          query: params.query,
        }),
      });
      getordersFn();
    };

    //点击编辑展示回显信息
    const showEditFn =  (row) => {
      console.log(row)
      exidDialogFrom.value = true;
      // ordersData = {...row}
      ordersData.order_id=row.order_id;
      ordersData.order_number=row.order_number;
      ordersData.order_pay=row.order_pay;
      ordersData.pay_status=row.pay_status;
      ordersData.order_price=row.order_price;
      ordersData.is_send=row.is_send;

      console.log(ordersData)
    };

    //点击编辑提交 
    const deleOrdersFn = async () => {
      console.log(111);
      const { order_id, is_send, order_pay, order_price, order_number, pay_status } = ordersData;
      
      await editOrders(order_id, {
        is_send,
        order_pay,
        order_price,
        order_number,
        pay_status,
      });
      exidDialogFrom.value = false;
      getordersFn();
    };

    onMounted(() => {
      getordersFn();
    });
    return {
      ordersData,
      getordersFn,
      dateFormat,
      statusFormatter,
      params,
      handleSizeChange,
      handleCurrentChange,
      exidDialogFrom,
      showEditFn,
      deleOrdersFn,
      formLabelWidth
    };
  },
};
</script>
<style scoped lang="scss">
.el-table {
  margin-top: 20px;
}
</style>